<template>
    <!-- pages/pwset/pwset.wxml -->
    <view id="My_pwset">
        <view class="edit_pw">
            <view class="l_input">
                <view class="text">
                    <view class="min">为保证您的账号安全，需验证原手机号!您当前登录手机号为 151****7612</view>
                </view>
                <view class="inner_input" :class="[accord ? '' : 'err', isfocus == 'yzm' ? 'isfocus' : '']">
                    <input :focus="focusIS == 'yzm'" @change="inputChange" @blur="handleBlur" @focus="handelFocus"
                        v-model="yzm" data-pw="yzm" placeholder="请输入验证码" />
                    <view class="fs_12 color_blue">
                        获取验证码
                    </view>
                </view>
            </view>
            <view class="l_input">
                <view class="i_name">新手机号</view>
                <view class="inner_input" :class="[accord ? '' : 'err', isfocus == 'phoneNo' ? 'isfocus' : '']">
                    <input @blur="handleBlur" :focus="focusIS == 'phoneNo'" @focus="handelFocus" v-model="phoneNo"
                        @input="inputChange" data-pw="phoneNo" placeholder="请输入新的手机号" />
                </view>
                <view class="inner_input" :class="[accord ? '' : 'err', isfocus == 'yzm' ? 'isfocus' : '']">
                    <input :focus="focusIS == 'yzm'" @change="inputChange" @blur="handleBlur" @focus="handelFocus"
                        v-model="yzm" data-pw="yzm" placeholder="请输入验证码" />
                    <view class="fs_12 color_blue">
                        获取验证码
                    </view>
                </view>
            </view>
            <view class="prompt fs_12 color_gray">
                <view>验证码将以短信方式发送到手机</view>
                <view>
                    <view>温馨提醒：</view>
                    <view>1.一个手机号只能作为一个账号的登录名</view>
                    <view> 2.手机号修改成功，原手机号将不支持登录</view>
                </view>
            </view>
        </view>
        <!-- <view class="edit_btn">
            校验手机号
        </view> -->
        <view class="edit_btn">
            确定
        </view>
        <uni-popup ref="popup" z-index="3" :is-mask-click="false">
            <view class="wrapper">
            </view>
        </uni-popup>
    </view>
</template>

<script setup lang="ts">
import { useMemberStore } from '@/stores/modules/member';//用户信息
const memberStore = useMemberStore();//用户状态
//unipopup组件 遮罩层
let popup = ref<any>(null)
//关闭遮罩层
const onClickHide = () => {
    popup.value.close()
}
//获取输入内容
const inputChange = function (e: any) {
    // 使用正则表达式验证手机号码
    var regex = /^1[3456789]\d{9}$/;
    let type = e.currentTarget.dataset.msg;
    if (type == 'name') {
        userData.UserName
        if (!userData.UserName) {
            nameErrorMsg.value = '请输入姓名'
        } else {
            nameErrorMsg.value = ''
        }
    } else {
        console.log(userData.UserTel);
        if (!regex.test(userData.UserTel as any)) {
            TelErrorMsg.value = '请输入正确的手机号'
        } else {
            TelErrorMsg.value = ''
        }
    }
}
const phoneNo = ref('')
const yzm = ref('')
const isfocus = ref('')
const focusIS = ref('')
const accord = ref(true)
//获取焦点是边框
const handelFocus = (e: any) => {
    isfocus.value = e.currentTarget.dataset.pw
}

//失去时
const handleBlur = (e: any) => {
    isfocus.value = ''
}



const noop = () => {
    console.log('占位：函数 noop 未声明');
}
</script>

<style lang="scss" scoped>
/* pages/pwset/pwset.wxss */
#My_pwset {
    height: 100vh;
    box-sizing: border-box;
    padding: 20px;
    background: rgb(242, 245, 249);

    .text {
        .min {
            color: rgb(61, 73, 102);
            font-family: Poppins;
            font-size: 26rpx;
            font-weight: 500;
        }
    }

    .edit_pw {
        .msg {
            color: rgb(129, 139, 160);
            font-family: HarmonyOS Sans SC;
            font-size: 12px;
            font-weight: 400;

            &.err {
                color: #FA4D5E;
            }
        }
    }

    .edit_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0077FF;
        border-radius: 12px;
        padding: 16px 230rpx 16px 230rpx;
        color: rgb(255, 255, 255);
        font-family: Poppins;
        font-size: 32rpx;
        font-weight: 500;
        white-space: nowrap;
        margin: 10px 0;
    }

    /*** 输入框 **/
    .l_input {
        .i_name {
            color: rgb(9, 14, 29);
            font-family: SF Pro Display;
            font-size: 14px;
            font-weight: 600;
            margin: 16rpx 0;
        }

        .inner_input {
            position: relative;
            display: flex;
            align-items: center;
            padding: 30rpx 20rpx;
            /* #FFFFFF 白色 100 */
            background: rgb(255, 255, 255);
            /* 白色背景090E1D 5% 16 32 */
            box-shadow: 0px 16px 32px 0px rgba(9, 14, 29, 0.05);
            border-radius: 24rpx;
            margin: 30rpx 0;
            justify-content: space-between;

            &.err {
                /* #FA4D5E 红色点缀 */
                border: 1px solid rgb(250, 77, 94);
                /* 效果样式3 */
                box-shadow: 0px 0px 0px 4px rgba(250, 77, 94, 0.25);
            }

            &.isfocus {
                /* #0097ac 主色调 */
                border: 1px solid rgb(0, 119, 255);
                /* 效果样式2 */
                box-shadow: 0px 0px 0px 4px rgba(0, 119, 255, 0.25);
            }

            .left {
                margin-right: 20rpx;
            }

            .right {
                position: absolute;
                right: 20rpx;
                z-index: 2;
            }

            input {
                width: 70%;
                color: rgb(61, 73, 102);
                font-family: SF Pro Display;
                font-size: 28rpx;
                font-weight: 600;
            }
        }
    }

    .prompt {
        view {
            margin: 6px 0;
            color: #7C8190;
        }
    }
}
</style>